<template>
    <div class="formsWrap">
        <el-form ref="elFormRef" :model="submitParams" :rules="rules" label-width="auto">
            <el-row :gutter="20">
                <el-col :span="12">
                    <!--输入框-->
                    <el-form-item label="手机号：" prop="input">
                        <el-input
                            v-model="submitParams.input"
                            placeholder="请输入手机号"
                            readonly
                            @click="handleInputFocus"
                            :disabled="pageType == 'view'" 
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--文本框-->
                    <el-form-item label="文本框：" prop="textarea">
                        <el-input
                            v-model="submitParams.textarea"
                            placeholder="请输入文本框"
                            type="textarea"
                            :rows="2"
                            maxlength=30
                            show-word-limit
                            :disabled="pageType == 'view'" 
                            clearable
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <!--选择框-->
                    <el-form-item label="选择器：" prop="select">
                        <el-select
                            v-model="submitParams.select"
                            clearable
                            :disabled="pageType == 'view'" 
                            placeholder="请选择选择器"
                        >
                            <el-option v-for="(item,index) in selectOptions" :value="item.value" :label="item.label" :key="index" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--日期选择器-->
                    <el-form-item label="日期选择器：" prop="ymd">
                        <el-date-picker
                            v-model="submitParams.ymd"
                            type="date"
                            placeholder="请选择日期选择器"
                            value-format="yyyy-MM-dd"
                            :disabled="pageType == 'view'" 
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <!--日期时间范围选择器-->
                    <el-form-item label="日期范围选择器：" prop="ymdRange">
                        <el-date-picker
                            v-model="submitParams.ymdRange"
                            type="daterange"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="yyyy-MM-dd"
                            :disabled="pageType == 'view'" 
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--单选框-->
                    <el-form-item label="单选框：" prop="radio">
                        <el-radio-group v-model="submitParams.radio" :disabled="pageType == 'view'">
                            <el-radio-button v-for="item in radioOptions" :key="item.value" :value="item.value">{{ item.label }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <!--多选框-->
                    <el-form-item label="多选框：" prop="multiple">
                        <el-checkbox-group v-model="submitParams.multiple" :disabled="pageType == 'view'">
                            <el-checkbox v-for="item in multipleOptions" :label="item.label" :value="item.value" :border="true" />
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--开关-->
                    <el-form-item label="开关：" prop="swtich">
                        <el-switch v-model="submitParams.swtich" :disabled="pageType == 'view'" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <!--日期选择器-->
                    <el-form-item label="日期时间：" prop="ymdHms">
                        <el-date-picker
                            v-model="submitParams.ymdHms"
                            type="datetime"
                            placeholder="请选择日期时间"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            :disabled="pageType == 'view'" 
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--日期选择器-->
                    <el-form-item label="月份：" prop="month">
                        <el-date-picker
                            v-model="submitParams.month"
                            type="month"
                            placeholder="请选择月份"
                            value-format="YYYY-MM"
                            :disabled="pageType == 'view'" 
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="text-align:left;">
            <el-button type="default" icon="el-icon-close">关闭</el-button>
            <el-button type="success" icon="el-icon-plus">保存</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="submitForm">提交</el-button>
        </div>
        <dialogCom ref="dialogRef" :key="dialogDialogKey" @updateDialogKey = 'dialogDialogKey++'></dialogCom>
    </div>
</template>
<script setup>
import dialogCom from './dialogCom.vue'
import { ref,reactive } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
//表单数据
let submitParams = reactive({
    input: "",
    textarea: "",
    select: "",
    ymd: "",
    ymdRange: [],
    ymdRangeStart: "",
    ymdRangeEnd: "",
    radio: "",
    multiple: [],
    swtich: true,
    ymdHms: "",
    month: "",
})

//表单校验规则
let rules = reactive({
    input: [
        { required: true, message: "请输入手机号", trigger: 'blur' },
        { pattern: /^1[34578]\d{9}$/, message: '请输入合格的手机号', trigger: 'blur' }
    ],
    textarea: [{required: true, message: "请输入文本框", trigger: 'blur'}],
    select: [{required: false, message: "请选择选择器", trigger: 'change'}],
    ymd: [{required: true, message: "请选择日期选择器", trigger: 'change'}],
    ymdRange: [{required: true, message: "请选择日期范围选择器", trigger: 'change'}],
    radio: [{required: true, message: "请选择单选框", trigger: 'change'}],
    multiple: [{required: true, message: "请选择多选框", trigger: 'change'}],
    swtich: [{required: true, message: "请选择开关", trigger: 'change'}],
    ymdHms: [{required: false, message: "请选择日期时间", trigger: 'change'}],
    month: [{required: false, message: "请选择月份", trigger: 'change'}],
})
let selectOptions = reactive([ //选择器：选项
    { label: "选项一", value: "0" },
    { label: "选项二", value: "1" },
]);
let radioOptions = reactive([ //单选框：选项
    { label: "选项一", value: "0" },
    { label: "选项二", value: "1" },
]);
let multipleOptions = reactive([ //多选框：选项
    { label: "多选一", value: "0" },
    { label: "多选二", value: "1" },
]);
/* —— 查询和编辑时，初始化表单数据：start —————————————————— */
let pageType = ref(""); //页面类型，编辑：edit；查看：view，新增：add
pageType.value = route?.query?.type;
console.log(pageType.value);
if(pageType.value == 'view' || pageType.value == 'edit'){
    initDetail();
}
function initDetail(){
    //初始化详情数据
};
/* —— 查询和编辑时，初始化表单数据：end —————————————————— */
const elFormRef = ref(null);
function submitForm() {
    console.log(submitParams);
    elFormRef.value.validate((valid) => {
        if (valid) {
            //校验通过
            
        } else {
            //校验未通过
        }
    });
};

let dialogDialogKey = ref(0);
const dialogRef = ref(null);
function handleInputFocus(){
    console.log("输入框聚焦",dialogRef.value);
    dialogRef.value.open();
}
</script>
<style type="text/css" lang="less" scoped>
.formsWrap {
}
</style>